<template>
  <div class="same-change-oldstyle">
    <div class="same-head-box">
      <div class="saem-seat-box">
        <div class="saem-seat-left">
          <span>当前位置：</span>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>设置</el-breadcrumb-item>
            <el-breadcrumb-item>账户设置</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="saem-seat-right">
          <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
        </div>
      </div>
    </div>
    <div class="account-setting">
      <div class="title-wrapper">
        <i class="el-icon-s-custom"></i>
        <span>账户信息</span>
      </div>
      <div class="row-cell">
        <div class="row-child">
          <label class="row-label">合伙人编号</label>
          <el-input size="medium" v-model="account.number" disabled></el-input>
        </div>
        <div class="row-child">
          <label class="row-label">账户</label>
          <el-input size="medium" v-model="account.account" disabled></el-input>
        </div>
      </div>

      <div class="row-cell">
        <div class="row-child">
          <label class="row-label">邮箱</label>
          <el-input size="medium" v-model="account.email" type="email" placeholder="请填写邮箱"></el-input>
        </div>
        <div class="row-child">
          <label class="row-label">地址</label>
          <el-select size="medium" class="province-select" @change="chooseProvince" v-model="account.province_name"
            placeholder="请选择">
            <el-option v-for="item in provinces" :key="item.name" :label="item.name" :value="item.name">
            </el-option>
          </el-select>
          <el-select size="medium" class="city-select" @change="chooseCity" v-model="account.city_name"
            placeholder="请选择">
            <el-option v-for="item in citys" :key="item.name" :label="item.name" :value="item.name">
            </el-option>
          </el-select>
          <el-select size="medium" class="area-select" v-model="account.area_name" placeholder="请选择">
            <el-option v-for="item in areas" :key="item.name" :label="item.name" :value="item.name">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="row-cell">
        <div class="row-child">
          <label class="row-label">详细地址</label>
          <el-input v-model="account.address" size="medium" placeholder="请填写联系地址"></el-input>
        </div>
      </div>

      <div class="title-wrapper mt-40">
        <i class="el-icon-s-management"></i>
        <span> 联系人信息</span>
      </div>
      <div class="row-cell">
        <div class="row-child">
          <label class="row-label">联系人</label>
          <el-input size="medium" v-model="contact.name" placeholder="请填写联系人"></el-input>
        </div>
        <div class="row-child">
          <label class="row-label">电话号码</label>
          <el-input size="medium" v-model="contact.tel" type="tel" maxlength="11" placeholder="请填写电话号码"></el-input>
        </div>
      </div>

      <div class="row-cell">
        <div class="row-child">
          <label class="row-label">身份证号</label>
          <el-input size="medium" v-model="contact.idcard" maxlength="18" placeholder="请填写身份证号码"></el-input>
        </div>
        <div class="row-child">
          <label class="row-label">地址</label>
          <el-select size="medium" class="province-select" @change="chooseProvince($event,2)"
            v-model="contact.province_name" placeholder="请选择">
            <el-option v-for="item in cProvinces" :key="item.name" :label="item.name" :value="item.name">
            </el-option>
          </el-select>
          <el-select size="medium" class="city-select" @change="chooseCity($event,2)" v-model="contact.city_name"
            placeholder="请选择">
            <el-option v-for="item in cCitys" :key="item.name" :label="item.name" :value="item.name">
            </el-option>
          </el-select>
          <el-select size="medium" class="area-select" v-model="contact.area_name" placeholder="请选择">
            <el-option v-for="item in cAreas" :key="item.name" :label="item.name" :value="item.name">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="row-cell">
        <div class="row-child">
          <label class="row-label">详细地址</label>
          <el-input size="medium" v-model="contact.address" placeholder="请填写联系地址"></el-input>
        </div>
      </div>

      <el-button :disabled="disabled" @click="save" icon="el-icon-check" size="medium" class="save-btn" type="primary">保存
      </el-button>

      <div class="title-wrapper mt-40">
        <i class="el-icon-s-finance"></i>
        <span> 提现设置</span>
      </div>
      <div class="withdraw-config">
        <div class="withdraw-cell" v-for="item in  bankCards" :key="item.p_sn_whole">
          <div class="withdraw-top">
            <el-image v-if="item.src" :src="item.src"></el-image>
            <span v-else>{{item.bank_name}}</span>
            <span>尾号：{{ item.p_sn_whole |filterEndNumber}}</span>
          </div>
          <div class="withdraw-info">
            <span>持卡人姓名:{{item.p_name}}</span>
            <div class="mt-10">
              <span>手机号:{{item.phone}}</span>
              <div class="operate-btns">
                <span @click="deleteBank(item)">删除</span>
                <span @click="editBank(item)">编辑</span>
              </div>
            </div>
          </div>
        </div>
        <div class="withdraw-cell add-bankcard" @click="addBank">
          <i class="el-icon-circle-plus-outline"></i>
          <span>添加银行卡</span>
        </div>
      </div>
    </div>

    <el-dialog  :close-on-click-modal="false" custom-class="bankcard-custom-dialog common-custom-dialog" center
      :visible.sync="dialogFormVisible">

      <el-dialog custom-class="common-custom-dialog" :close-on-click-modal="false" width="50%" title="用户协议" center :visible.sync="innerVisible"
        append-to-body>
        <div class="agreement">
          <p>
            优合一众网络科技有限公司（以下均简称“优合一众”）在此提醒您（以下称“您”或称“用户”）认真阅读理解本协议，包括免除或者限制优合一众责任的免责条款及对您的权利限制条款；您确认，在您使用优合一众的各项服务之前，您已充分阅读、理解并接受本协议的全部内容，一旦您在“我已阅读以上协议”前勾选，并点击“保存”按钮，即表示您同意遵循本协议之所有约定，一旦您使用优合一众的全部或部分服务,亦表示您同意遵循本协议之所有约定。本协议在您和优合一众之间具有合同上的法律效力。
          </p>
          <p>甲方：全体滳滳打水注册用户（以上以下简称“你”或称“用户”）</p>
          <p>乙方：优合一众网络科技有限公司（以上以下均简称“优合一众”）</p>
          <p>一、
            您同意通过本协议选定的您银行卡（以下简称“银行卡”）在优合一众平台与您在第三方支付机构的托管账户上进行绑定、开通快捷支付业务，即本协议所述的“绑定”为扣款银行卡的确定，一旦绑定成功，第三方支付机构每次扣款前无需输入您绑定的银行卡账号、密码等信息，也无需您提交绑定的银行卡进行刷卡
          </p>
          <p>二、 您承诺上述选定的银行卡的开户证件信息与您身份证件信息完全一致。</p>
          <p>三、 您允许优合一众向快捷支付第三方支付机构发送您的信息（包括但不限于您的身份信息、银行信息、优合一众注册信息等涉及您个人的各项信息）以便完成快捷支付业务。</p>
          <p>四、 优合一众向第三方支付机构发送的您的一切信息是依据您自己主动填写的信息，优合一众有权利但无义务审查您的银行卡信息与身份证件信息。优合一众不对是否进行审查核实做出任何承诺，一切以您填写的信息为准。</p>
          <p>五、 您必须按照第三方支付机构的快捷支付协议的要求绑定符合第三方支付机构要求的银行卡，并且您承诺是绑定的银行卡的合法持卡人（指银行卡账户的开户主体，下同）。</p>
          <p>六、 其他有关绑定银行卡、开通快捷支付的权利义务详见您与第三方支付机构达成的快捷支付协议的各项约定。</p>
          <p>七、 您与第三方支付机构因快捷支付相关事宜发生的争议与纠纷，请您按照您与第三方支付机构之间的快捷支付协议的约定解决，优合一众不对您与第三方支付机构之间的争议承担任何责任。</p>
          <p>八、
            您的个人资料受到严格保护，不接受优合一众、第三方支付机构、您银行卡开户行及您之外的任何个人或单位的查询请求。但法律法规（含行政规章、民族自治地方的自治条例和单行条例，下同）、司法机关、监管机构、你与第三方支付机构之前的快捷支付协议另有规定或要求，或为开通快捷支付之需要确有必要披露的除外。
          </p>
          <p>九、 您承诺如果因您违反本协议或者与第三方支付机构之间的协议造成优合一众损失的，优合一众有权向你追究法律责任。</p>
          <div class="foot_cont"> 优合一众网络科技有限公司</div>
          <span slot="footer" class="dialog-footer" v-if="!agree">
            <el-button size="medium" @click="cancelAgreement">取 消</el-button>
            <el-button size="medium" type="primary" @click="allowAgreement">同意协议</el-button>
          </span>
        </div>

      </el-dialog>


      <div class="dialog-title" slot="title">
        <i class="el-icon-bank-card"></i>
        <span>{{dialogType==1?'添加':'编辑'}}银行卡</span>
      </div>
      <div class="bank-wrapper">
        <div class="bank-row">
          <label>选择类型</label>
          <el-select class="bank-select" v-model="card_type" size="medium" placeholder="请选择类型">
            <el-option v-for="item in bankTypes" :value="item.value" :label="item.name" :key="item.value"></el-option>
          </el-select>
        </div>

        <div class="bank-row">
          <label>持卡人</label>
          <el-input size="medium" v-model="card_name" placeholder="请填写持卡人姓名"></el-input>
        </div>

        <div class="bank-row">
          <label>卡号</label>
          <el-input size="medium" v-model="card_number" placeholder="请填写银行卡号"></el-input>
        </div>
        <div class="bank-row">
          <label>开户行</label>
          <el-select class="bank-select" v-model="bankIndex" size="medium" placeholder="请选择开户行">
            <el-option v-for="(item,index) in bankList" :key="item.bank_code" :label="item.bank_name" :value="index">
            </el-option>
          </el-select>
        </div>

        <div class="bank-row">
          <label>手机号</label>
          <el-input size="medium" v-model="card_phone" type="tel" maxlength="11" placeholder="请填写手机号"></el-input>
        </div>


        <div class="bank-row">
          <label>身份证号</label>
          <el-input size="medium" v-model="card_id_card" maxlength="18" placeholder="请填写身份证号"></el-input>
        </div>

        <div class="bank-row">
          <label>所在地</label>
          <el-input size="medium" v-model="bank_address" placeholder="请填写所在地"></el-input>
        </div>

        <div class="bank-row">
          <el-checkbox class="bank-checkbox" v-model="agree">同意</el-checkbox><span @click="showInnerDialog"
            class="rule">《用户协议》</span>
        </div>
        <div class="bank-row">
          <el-button :disabled="bankDisabled" icon="el-icon-finished" @click="submit" class="bank-btn" size="medium"
            type="primary">
            {{dialogType==1?'添加':'编辑'}}银行卡
          </el-button>
        </div>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  const bankTypes = [{
    value: '1',
    name: '银行卡'
  }];
  import { bankCardAttribution } from '../../bankCradMsg.js'
  export default {
    name: "accountsetting",
    inject: ["reload"],
    data() {
      return {

        card_name: "",
        card_number: "",
        bankIndex: "",
        card_id_card: '',
        card_type: "1",
        bank_name: '',
        bank_address: "",
        card_phone: "",
        card_id: "",
        bankTypes,
        bankDisabled: false,
        dialogType: 1,//1添加 2编辑
        agree: false,
        dialogFormVisible: false,
        innerVisible: false,
        disabled: false,
        account: {
          name: "",
          account: "",
          email: "",
          number: "",
          address: '',
          province_name: "",
          city_name: "",
          area_name: "",
          tel: "",
        },
        contact: {
          name: "",
          tel: "",
          idcard: "",
          address: "",
          province_name: "",
          city_name: "",
          area_name: ""
        },

        provinces: [], //省
        citys: [], //城市
        areas: [], //地区
        cProvinces: [],
        cCitys: [],
        cAreas: [],
        bankCards: [], //银行卡列表
        bankList: [],//后台银行配置
      }
    },
    mounted() {
      this.getPartnerInfo();
      this.getBankCardList();
      this.getBankConfig();
    },

    filters: {
      filterEndNumber: function (value) {
        if (!value) return ''
        return value.substr(-4)
      }
    },
    methods: {

      deleteBank(item) {
        let end_num = item.p_sn_whole.substr(-4);
        this.$msgbox({
          title: '提示',
          message: `确定删除尾号为${end_num}的银行卡`,
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(action => {
          this.$post({
            url: "Partner/Bank/delBank",
            data: {
              "bank_id": item.bank_id
            }, success: res => {
              if (res.code > 0) {
                this.$message.success(res.message);
                this.getBankCardList();
              } else {
                this.$message.error(res.message);
              }
            }, error: e => {
              this.$message.error("网络错误");
            }
          })
        }).catch(() => {

        });;
      },

      showInnerDialog() {
        this.innerVisible = true;
      },
      allowAgreement() {
        this.agree = true;
        this.innerVisible = false;
      },
      cancelAgreement() {
        this.innerVisible = false;
      },

      //添加银行
      addBank() {
        this.dialogType = 1;
        this.dialogFormVisible = true;
        this.card_name = "";
        this.card_number = "";
        this.bankIndex = "";
        this.card_id_card = "";
        this.bank_name = "";
        this.bank_address = "";
        this.card_phone = "";

      },


      editBank(item) {
        this.card_name = item.p_name;
        this.card_number = item.p_sn_whole;
        this.card_id_card = item.id_card;
        this.bank_address = item.phone_whole
        this.card_phone = item.phone_whole;
        this.card_id = item.bank_id;
        let index = this.bankList.findIndex(el => {
          return el.bank_code == item.bank_code;
        })
        if (~index) {
          this.bankIndex = index;
        }
        this.dialogFormVisible = true;
        this.dialogType = 2;
      },

      submit() {
        if (this.card_name === "") {
          this.$message.warning("请填写持卡人");
          return false;
        }
        if (this.card_number === "") {
          this.$message.warning("请填写银行卡号");
          return false;
        }
        if (this.bankIndex === "") {
          this.$message.warning("请选择开户行");
          return false;
        }
        if (this.card_phone === "") {
          this.$message.warning("请填写手机号");
          return false;
        }
        if (this.card_id_card === "") {
          this.$message.warning("请填写身份证号");
          return false;
        }
        if (this.bank_address === "") {
          this.$message.warning("请填写所在地");
          return false;
        }
        if (!this.agree) {
          this.$message.warning("请先阅读,并同意服务协议");
          return false;
        }
        this.bankDisabled = true;
        const bank = this.bankList[this.bankIndex];
        let param = {
          "p_name": this.card_name,
          "p_sn": this.card_number,
          "bank_code": bank.bank_code,
          "id_card": this.card_id_card,
          "type": this.card_type,
          "bank_name": bank.bank_name,
          "address": this.bank_address,
          "phone": this.card_phone,
        }
        let url = "Partner/Bank/addBank";
        if (this.dialogType == 2) {
          url = "Partner/Bank/editBank";
          param.bank_id = this.card_id;
        }
        this.$post({
          url: url,
          data: param,
          success: res => {
            this.bankDisabled = false;
            if (res.code > 0) {
              this.$message.success(res.message);

              this.dialogFormVisible = false;
              this.getBankCardList();
            } else {
              this.$message.warning(res.message);
            }
          }, error: e => {
            this.bankDisabled = false;
            this.$message.error("网络错误");
          }
        })

      },

      //获取后台银行配置
      getBankConfig() {
        this.$post({
          url: "Partner/Bank/getBanks",
          success: res => {
            if (res.code > 0) {
              this.bankList = res.data;
              console.log(this.bankList, "bankList");
            } else {
              this.$message.error(res.message);
            }
          }, error: e => {
            this.$message.error("网络错误");
          }
        })

      },

      //获取银行卡信息
      getBankCardList() {
        this.$post({
          url: "Partner/Bank/getBankList",
          success: res => {
            if (res.code > 0) {
              let list = [];
              res.data.forEach(element => {
                if (element.type == 1) {
                  let attr = bankCardAttribution(element.p_sn_whole);
                  if (typeof attr == "object") {
                    element.src = `https://apimg.alipay.com/combo.png?d=cashier&t=${attr.bankCode}`;
                  }
                  list.push(element);
                }
              })
              this.bankCards = list;
              console.log(list, "list")
            } else {
              this.$message.error(res.message);
            }
          },
          error: e => {
            this.$message.error("网络错误");
          }
        })
      },

      //选择省
      chooseProvince(val, type = 1) {
        let province = type == 1 ? this.provinces : this.cProvinces;
        let index = province.findIndex(item => {
          return item.name == val;
        })
        let id;
        if (type == 1) {
          this.account.city_name = "";
          this.account.area_name = "";
          id = this.provinces[index].id;
        } else {
          this.contact.city_name = "";
          this.contact.area_name = "";
          id = this.cProvinces[index].id
        }
        this.getCity(id).then(res => {
          if (type == 1) {
            this.citys = res;
          } else {
            this.cCitys = res;
          }
        })
      },

      //选择市
      chooseCity(val, type = 1) {
        let city = type == 1 ? this.citys : this.cCitys;
        let index = city.findIndex(item => {
          return item.name == val;
        })
        let id;
        if (type == 1) {
          this.account.area_name = "";
          id = this.citys[index].id;
        } else {
          this.contact.area_name = "";
          id = this.cCitys[index].id;
        }
        this.getArea(id).then(res => {
          if (type == 1) {
            this.areas = res;
          } else {
            this.cAreas = res;
          }
        })
      },


      //获取合伙人相关信息
      getPartnerInfo() {
        this.$post({
          url: "Partner/Setup/get_partner",
          success: res => {
            console.log(res);
            if (res.code > 0) {
              const source = res.data;
              this.account = {
                account: source.account,
                email: source.email,
                number: source.s_number,
                address: source.address,
                province_name: source.province_name,
                city_name: source.city_name,
                area_name: source.area_name,
                name: source.account_name,
                tel: source.tel
              }
              this.contact = {
                name: source.contacts,
                tel: source.contacts_tel,
                idcard: source.contacts_id_card,
                address: source.contacts_address,
                province_name: source.contacts_province_name,
                city_name: source.contacts_city_name,
                area_name: source.contacts_area_name
              }

              this.getProvince().then(res => {
                this.provinces = this.cProvinces = res;
                if (source.province_name && source.city_name && source.area_name) {
                  let index = res.findIndex(item => {
                    return item.name == source.province_name;
                  })
                  if (~index) {
                    let province = res[index];
                    this.getCity(province.id).then(res => {
                      this.citys = res;
                      let index = res.findIndex(item => {
                        return item.name == source.city_name;
                      })
                      if (~index) {
                        let city = res[index];
                        this.getArea(city.id).then(res => {
                          this.areas = res;
                        })
                      }
                    })
                  }
                }
                if (source.contacts_province_name && source.contacts_city_name && source.contacts_area_name) {
                  let index = res.findIndex(item => {
                    return item.name == source.contacts_province_name;
                  })
                  if (~index) {
                    let province = res[index];
                    this.getCity(province.id).then(res => {
                      this.cCitys = res;
                      let index = res.findIndex(item => {
                        return item.name == source.contacts_city_name;
                      })
                      if (~index) {
                        let city = res[index];
                        this.getArea(city.id).then(res => {
                          this.cAreas = res;
                        })
                      }
                    })
                  }
                }
              })




            } else {
              this.$message.error(res.message);
            }
          },
          error: e => {
            this.$message.error("网络错误");
          }
        })
      },

      //获取省
      getProvince() {
        return new Promise((resolve, reject) => {
          this.$post({
            url: "Common/Common/getProvince",
            success: res => {
              if (res.code) {
                resolve(res.data)
              } else {
                reject(res.message)
              }
            },
            error: e => {
              reject("网络错误");
            }
          })
        })
      },

      //获取市
      getCity(province_id) {
        return new Promise((resolve, reject) => {
          this.$post({
            url: "Common/Common/getCity",
            data: { id: province_id },
            success: res => {
              if (res.code) {
                resolve(res.data)
              } else {
                reject(res.message)
              }
            },
            error: e => {
              reject("网络错误");
            }
          })
        })
      },

      //获取市
      getArea(city_id) {
        return new Promise((resolve, reject) => {
          this.$post({
            url: "Common/Common/getArea",
            data: { id: city_id },
            success: res => {
              if (res.code) {
                resolve(res.data)
              } else {
                reject(res.message)
              }
            },
            error: e => {
              reject("网络错误");
            }
          })
        })
      },


      save() {
        this.disabled = true;
        this.$post({
          url: "Partner/Setup/save_partner",
          data: {
            account_name: this.account.name,
            tel: this.account.tel,
            email: this.account.email,
            address: this.account.address,
            province_name: this.account.province_name,
            city_name: this.account.city_name,
            area_name: this.account.area_name,
            contacts: this.contact.name,
            contacts_tel: this.contact.tel,
            contacts_id_card: this.contact.idcard,
            contacts_province_name: this.contact.province_name,
            contacts_city_name: this.contact.city_name,
            contacts_area_name: this.contact.area_name,
            contacts_address: this.contact.address,
          },
          success: res => {
            this.disabled = false;
            if (res.code > 0) {
              this.$message.success(res.message);
            } else {
              this.$message.error(res.message)
            }
          },
          error: e => {
            this.disabled = false;
            this.$message.error("网络错误")
          }
        })
      },

      RefreshFun() {
        // 调用reload方法，刷新整个页面
        this.reload();
      },
    },
  }
</script>
<style scoped>
  .account-setting {
    padding: 30px;
  }

  .title-wrapper {
    color: #2C5586;
  }

  .title-wrapper i {
    font-size: 18px;
  }

  .title-wrapper span {
    margin-left: 5px;
  }

  .row-cell {
    width: 1000px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
  }

  .row-cell div:first-child {
    width: 42%;
  }


  .row-child {
    width: 48%;
    display: flex;
    align-items: center;
  }




  .row-label {
    width: 80px;
    text-align: right;
    flex-shrink: 0;
    margin-right: 10px;
    font-size: 14px;
  }

  .province-select {
    margin-right: 10px;
  }

  .city-select {
    margin-right: 10px;
  }

  .mt-40 {
    margin-top: 40px;
  }

  .save-btn {
    margin-left: 20px;
    margin-top: 30px;
  }

  .withdraw-config {
    margin-top: 20px;
    width: 1000px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .withdraw-cell {
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 320px;
    height: 134px;
    box-sizing: border-box;
    margin-right: 20px;
    margin-bottom: 20px;
  }

  .withdraw-cell:hover {
    box-shadow: 1px 2px 1px #ccc;
  }

  .withdraw-cell:nth-of-type(3n) {
    margin-right: 0;
  }

  .withdraw-top {
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 5px 0;
  }

  .withdraw-top span {
    font-weight: bold;
  }

  .withdraw-info {
    padding: 15px 20px;
    font-size: 14px;
  }

  .withdraw-info div {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mt-10 {
    margin-top: 10px;
  }



  .withdraw-info .operate-btns :first-child {
    color: rgb(255, 101, 101);
    cursor: pointer;
  }

  .withdraw-info .operate-btns :last-child {
    margin-left: 10px;
    color: #2aa5a9;
    cursor: pointer;
  }

  .add-bankcard {
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-flow: column wrap;
    justify-content: center;
    color: #666;
  }

  .add-bankcard i {
    font-size: 40px;
  }

  .add-bankcard span {
    margin-top: 10px;
  }


  .dialog-title {
    display: flex;
    justify-content: flex-end;
    justify-content: center;
    color: #fff;
  }


  .dialog-title i {
    font-size: 20px;
    margin-top: 2px;
    margin-right: 10px;
  }

  .bank-wrapper {
    width: 400px;
    margin: 0 auto;
  }

  .bank-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .bank-row label {
    margin-right: 10px;
    width: 60px;
    font-weight: 600;
    flex-shrink: 0;
  }

  .bank-select {
    flex: 1;
  }

  .rule {
    margin-left: -20px;
    color: #2C5586;
    cursor: pointer;
  }

  .bank-checkbox {
    margin-left: 70px;
  }

  .bank-btn {
    margin-left: 70px;
    margin-top: 5px;
  }

  .agreement p {
    text-indent: 2em;
    line-height: 30px;
  }

  .foot_cont {
    text-align: right;
    margin-top: 20px;
    font-weight: bold;
  }

  .dialog-footer {
    display: flex;
    justify-content: center;
  }
</style>
<style>
  .bankcard-custom-dialog {
    width: 700px !important;
  }

</style>